<template>
  <div class="login_body">
    <div class="login_container">
      <n-form ref="formRef" :model="modelRef" :rules="rules">
        <div class="form_title">Vue3 Template</div>
        <n-form-item path="username" label="用户名">
          <n-input
            placeholder="请输入用户名"
            v-model:value="modelRef.username"
            @keydown.enter.prevent
          />
        </n-form-item>
        <n-form-item path="password" label="密码">
          <n-input
            placeholder="请输入密码"
            v-model:value="modelRef.password"
            type="password"
            @keydown.enter.prevent
          />
        </n-form-item>
        <n-row :gutter="[0, 24]">
          <n-col :span="24">
            <div style="display: flex; justify-content: center">
              <n-button
                round
                type="primary"
                style="width: 200px"
                @click="handleValidateButtonClick"
              >
                登 录
              </n-button>
            </div>
          </n-col>
        </n-row>
      </n-form>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { FormInst, FormItemInst, FormItemRule, useMessage, FormRules } from 'naive-ui';
  import { ref } from 'vue';
  import useUserStore from '@/store/user';

  const user = useUserStore();
  const formRef = ref<FormInst | null>(null);
  const message = useMessage();
  const modelRef = ref<ModelType>({
    username: null,
    password: null,
  });

  function validatePasswordStartWith(rule: FormItemRule, value: string): boolean {
    return (
      !!modelRef.value.password &&
      modelRef.value.password.startsWith(value) &&
      modelRef.value.password.length >= value.length
    );
  }

  const rules: FormRules = {
    username: [
      {
        required: true,
        validator(rule: FormItemRule, value: string) {
          if (!value) {
            return new Error('请输入用户名');
          }
          return true;
        },
        trigger: ['input', 'blur'],
      },
    ],
    password: [
      {
        required: true,
        trigger: ['input', 'blur'],
        message: '请输入密码',
      },
    ],
  };
  function handleValidateButtonClick(e: MouseEvent) {
    e.preventDefault();
    formRef.value?.validate(errors => {
      if (!errors) {
        user.loginByUserName(modelRef.value).then(() => {
          message.success('登录');
        });
      } else {
        console.log(errors);
        message.error('验证失败');
      }
    });
  }
</script>

<style scoped lang="scss">
  .login_body {
    width: 100%;
    height: 100vh;
    position: relative;

    .login_container {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 420px;
      border: 1px solid #eee;
      padding: 20px;
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      .form_title {
        text-align: center;
        font-weight: 500;
        height: 42px;
        line-height: 42px;
        font-size: 18px;
        margin-bottom: 15px;
      }
    }
  }
</style>
